<template>
  <div v-if="listData" class="content-box">
    <div class="title-box">
      <div class="title fs-22">
        <span>{{ listData.title }}</span>
        <div v-if="listData.isCurrentUser">
          <el-button class="btn-color" type="success" size="medium" @click="edit">编辑</el-button>
          <el-button size="medium" @click="del">删除</el-button>
        </div>
      </div>
      <div class="classify-box marginT15">
        <div class="classify">
          <span>发起人：{{ listData.userName }}</span>
          <span
            v-if="listData.GROWTH_CLASSIFY.itemName"
            class="marginL40"
          >{{ listData.GROWTH_CLASSIFY.itemName }}</span>
          <span v-if="listData.STAGE.itemName">/{{ listData.STAGE.itemName }}</span>
          <span v-if="listData.SUBJECT.itemName">/{{ listData.SUBJECT.itemName }}</span>
          <span v-for="(item, index) in listData.cateTags" :key="index">,&nbsp;{{ item.tagsName }}</span>
        </div>
      </div>

      <div class="marginT15">
        <el-tag
          v-for="(item, index) in listData.colTag"
          :key="index"
          size="small"
          :class="index !== 0 ? 'marginL20' : ''"
          type="success"
        >{{ item.tagsName }}</el-tag>
      </div>
    </div>

    <div class="content marginT30">
      <div class="title">关联教研</div>
      <div
        v-if="listData.teachingResearch &&listData.teachingResearch.activityId"
        class="relation-box marginT40"
      >
        <div class="left">
          <el-image
            style="width: 350px; height: 208px; border-radius: 10px; overflow: hidden;"
            :src="listData.teachingResearch.coverImageUrl"
            fit="cover"
          />
        </div>
        <div class="right">
          <div class="right-top">
            <div class="relation-title fs-20 text-s-o">{{ listData.teachingResearch.title }}</div>
            <div class="relation-school fs-16">
              <el-image
                style="width: 20px; height: 20px; overflow: hidden; margin-right: 8px;"
                :src="require('@/assets/images/orgName.png')"
                fit="cover"
              />
              <span>{{ listData.orgName }}</span>
            </div>
          </div>
          <div class="right-bottom">
            <div class="tags">
              <span
                v-for="(cateItem, cateInx) in listData.teachingResearch.categoryList"
                :key="cateInx"
              >
                <span v-if="cateInx === 0">{{ cateItem }}</span>
                <span v-else>&nbsp;/&nbsp;{{ cateItem }}</span>
              </span>
            </div>
            <div
              v-if="listData.teachingResearch.progress ==='NOT_STARTED'"
              class="status text-center"
            >未开始</div>
            <div
              v-if="listData.teachingResearch.progress ==='STARTED'"
              class="status text-center"
            >进行中</div>
            <div v-if="listData.teachingResearch.progress ==='ENDED'" class="status text-center">已结束</div>
          </div>
        </div>
      </div>
    </div>

    <div class="content marginT30">
      <div class="title">报告内容</div>
      <p v-html="listData.textContent" />
      <ul class="file-box">
        <li v-for="(item, index) in listData.fileList" :key="index">
          <div class="box">
            <div class="left" @click="open(item)">
              <el-image style="width: 42px; height: 42px" :src="item.url" fit="cover" />
            </div>
            <div class="center" @click="open(item)">
              <div class="name fs-14 line-height20 text-s-o">{{ item.title }}</div>
              <div class="describe fs-12 line-height20">
                <span class="green">{{ item.createTime }}</span>
                <span class="marginL40" />
              </div>
            </div>
          </div>
        </li>
      </ul>
      <div class="button-box">
        <div
          v-clipboard:copy="copyUrl"
          v-clipboard:success="onCopy"
          v-clipboard:error="onError"
          class="btn"
        >
          <el-image class="img" :src="require('@/assets/images/share.png')" />分享
        </div>
        <div
          class="btn"
          :class="listData.isCollected ? 'active' : ''"
          @click="getCollectTeachingResearch"
        >
          <el-image
            v-if="listData.isCollected"
            class="img"
            :src="require('@/assets/images/collected.png')"
          />
          <el-image v-else class="img" :src="require('@/assets/images/collect.png')" />收藏
        </div>
      </div>
    </div>
    <!-- v-if="listData.resultReport&& listData.resultReport.reportId" -->

    <div v-if="listData.resultReport&& listData.resultReport.reportId" class="content marginT30">
      <div class="title">教研报告</div>
      <div class="teachingStatus" @click="openTeaching">
        <div class="h4 fs-14 text-s-o">{{ listData.resultReport.title }}</div>
        <div class="green fs-14" >查看详情</div>
      </div>
    </div>

    <Comment :list="listData" :comment-type="commentType" />
  </div>
</template>

<script>
import { collectReport } from '@/api/activity'
import { getTeachingResearchReport, deleteReport } from '@/api/createResult'
import Comment from '@/components/comment'
export default {
  components: {
    Comment
  },
  data () {
    return {
      copyUrl: window.location.href,
      listData: null,
      textarea: null,
      sources: null,
      commentType: 'TEACHING_RESEARCH_REPORT'
    }
  },

  created () {
    this.init()
  },
  methods: {
    init () {
      getTeachingResearchReport({
        reportId: this.$route.query.reportId
      }).then(res => {
        res.data.GROWTH_CLASSIFY = res.data.categoryList.filter(item => item.groupEnum === 'GROWTH_CLASSIFY')[0] || {
          cateId: '',
          groupEnum: '',
          itemCode: '',
          itemName: ''
        } // GROWTH_CLASSIFY
        res.data.STAGE = res.data.categoryList.filter(item => item.groupEnum === 'STAGE')[0] || {
          cateId: '',
          groupEnum: '',
          itemCode: '',
          itemName: ''
        } // STAGE
        res.data.SUBJECT = res.data.categoryList.filter(item => item.groupEnum === 'SUBJECT')[0] || {
          cateId: '',
          groupEnum: '',
          itemCode: '',
          itemName: ''
        } // SUBJECT

        res.data.subjectId = res.data.id
        this.listData = res.data
        console.log('教研报告详情:', res.data)

        // this.getCommentPage()
      })
    },

    openTeaching () {
      this.$router.push({
        name: 'uploadResearchReport',
        query: { activityId: this.listData.resultReport.reportId }
      })
    },

    open (item) {
      window.open(item.url, '_blank')
    },

    edit () {
      this.$router.push({
        name: 'uploadResearchReport',
        query: { reportId: this.listData.id }
      })
    },

    del () {
      const msg = '确认是否删除该教研报告！'
      this.$confirm(msg, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteReport({
            reportId: this.listData.id
          }).then(res => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.$router.push({
              name: 'ActivityList',
              query: { activeTabName: 'TeachingResearch' }
            })
          })
        })
        .catch(() => {
          // 取消操作
          console.log('cancel')
        })
    },

    getCollectTeachingResearch () {
      console.log(this.listData)
      this.listData.isCollected = !this.listData.isCollected
      collectReport({
        reportId: this.listData.id,
        collect: this.listData.isCollected
      }).then(res => {
        this.listData.isCollected
          ? this.$message({
            message: '收藏成功',
            type: 'success'
          })
          : this.$message({
            message: '收藏取消',
            type: 'success'
          })
      })
    },

    onCopy (e) {
      // console.log("copyUrl:", this.copyUrl);
      this.$message({
        message: '分享链接复制成功',
        type: 'success'
      })
    },
    onError (e) {
      this.$message.error('复制失败')
    }
  }
}
</script>

<style lang="scss" scoped>
.content-box {
  padding: 0 40px;

  .title-box {
    background: rgba(255, 255, 255, 1);
    border-radius: 16px;
    margin-top: 40px;
    padding: 40px;
    .title {
      display: flex;
      justify-content: space-between;
    }

    .classify-box {
      display: flex;
      .classify,
      .obj {
        color: rgba(0, 0, 0, 0.45);
      }
    }
  }

  .content {
    background: white;
    border-radius: 16px;
    padding-bottom: 40px;
    .title {
      padding: 0 42px;
      font-size: 16px;
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #e2e2e2;
    }
    p {
      padding: 40px;
      width: 80%;
      font-size: 16px;
      font-family: AppleSystemUIFont;
      color: rgba(0, 0, 0, 0.45);
      line-height: 26px;
    }
    .imgbox {
      display: flex;
      justify-content: center;
      padding: 0 120px;
    }

    .button-box {
      display: flex;
      justify-content: center;
      margin-top: 40px;

      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 120px;
        height: 40px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 6px;
        cursor: pointer;

        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.65);
        line-height: 40px;
      }
      .btn:not(:first-child) {
        margin-left: 40px;
      }
      .btn.active {
        border: 1px solid #54b87b;
        color: #54b87b;
      }
      .btn.active:last-child {
        border: 1px solid #f1bf25;
        color: #f1bf25;
      }
      .img {
        width: 24px;
        height: 24px;
        overflow: hidden;
        margin-right: 5px;
      }
    }

    .relation-box {
      display: flex;
      padding: 0 40px;
      .right {
        margin-left: 24px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 360px;
        .right-top {
          .relation-title {
            font-weight: bold;
            color: rgba(0, 0, 0, 0.85);
          }
          .relation-school {
            display: flex;
            align-content: center;
            font-weight: bold;
            color: rgba(0, 0, 0, 0.45);
            line-height: 24px;
            margin-top: 8px;
          }
        }
        .right-bottom {
          display: flex;
          justify-content: space-between;
          align-content: center;
          .status {
            width: 74px;
            font-size: 14px;
            font-family: MicrosoftYaHei;
            color: rgba(84, 184, 123, 1);
            line-height: 32px;

            background: rgba(230, 245, 237, 1);
            border-radius: 4px;
          }
        }
      }
    }
  }

  .comment-box {
    margin-top: 24px;
    background-color: white;
    border-radius: 16px;
    padding: 40px 0;

    .comment-val {
      border-radius: 8px;
    }
    .comment {
      border-top: 1px solid #dbdadd;
      padding: 40px 0;
      display: flex;
      position: relative;

      .left {
        position: relative;
        padding-left: 40px;
        padding-right: 16px;
        .img {
          width: 70px;
          height: 70px;
          border-radius: 50%;
          overflow: hidden;
        }
      }
      .left:after {
        content: "";
        display: block;
        clear: both;
        width: 100%;
        height: 3px;
        background-color: white;
        position: absolute;
        bottom: -41px;
        left: 0;
        z-index: 10;
      }
      .center {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        overflow: hidden;
        padding-right: 40px;
        .name {
          font-size: 16px;
          font-family: AppleSystemUIFont;
          color: rgba(0, 0, 0, 0.85);
          line-height: 24px;
        }
        .describe {
          font-size: 16px;
          font-family: AppleSystemUIFont;
          color: rgba(0, 0, 0, 0.45);
          line-height: 24px;
          display: flex;
          span {
            display: block;
            color: rgba(0, 0, 0, 0.85);
          }

          span:last-child {
            flex: 1;
            color: rgba(0, 0, 0, 0.45);
            padding-left: 20px;
          }
        }
      }
      .right {
        padding-right: 40px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .time {
          font-size: 16px;
          font-family: AppleSystemUIFont;
          color: rgba(0, 0, 0, 0.25);
          line-height: 24px;
        }
      }
    }

    .replyComment {
      padding-left: 84px;

      .left:after {
        left: -84px;
      }
    }
    .more-txt {
      position: absolute;
      left: 50%;
      bottom: 0;
      color: #54b87b;
      cursor: pointer;
      padding: 4px 10px;
    }
    .more {
      border-top: 1px solid #dbdadd;
      cursor: pointer;
      margin-top: 5px;
      padding-top: 40px;
      text-align: center;
      font-size: 16px;
      font-family: AppleSystemUIFont;
      color: rgba(84, 184, 123, 1);
      line-height: 24px;
    }
  }

  .teachingStatus {
    border-radius: 16px;
    padding: 0 40px;
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    .h4 {
      font-size: 20px;
      font-family: PingFang-SC-Medium, PingFang-SC;
      font-weight: 500;
      color: rgba(29, 29, 29, 1);
      flex: 1;
    }
    .green {
      color: #54b87b;
    }
  }

  .file-box {
    li {
      padding: 0 40px;
      .box {
        display: flex;
        align-items: center;
        height: 72px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.15);

        .left {
          display: flex;
          align-items: center;
          cursor: pointer;
        }
        .center {
          cursor: pointer;
          display: flex;
          flex-direction: column;
          margin-left: 8px;
          .name {
            font-family: MicrosoftYaHei;
            color: rgba(0, 0, 0, 0.65);
          }
          .describe {
            font-family: MicrosoftYaHei;
            color: rgba(0, 0, 0, 0.45);
            margin-top: 5px;
          }
          .describe.green {
            color: #54b87b;
          }
        }
      }
    }
  }
}
</style>
